import React, { useState, FC, useEffect } from 'react';
import { connect } from 'dva';
import { formatTimestamp, locationCode } from '@/utils';
import { Button, Tabs, Select, Modal, message, Form } from 'antd';
import { icon } from '@/config';

import { Statistics } from '@/components';
import FilterTemp from '../components/filter';
import ListTemp from '../components/list2';
import pageConfig from '../config/pageConfig';
const { namespace, pageName } = pageConfig;
const { confirm } = Modal;

interface PageProps {}

const Page: FC<PageProps> = (props: any) => {
  const {
    actions,
    [namespace]: {
      spinning,
      filterCondition,
      fields,
      formFields,
      pagination,
      list,
      confirmLoading,
      statusEnum,
      statusKey,
    },
  }: any = props;
  // 统计组件参数
  const [form] = Form.useForm();
  const statisticsProps = {
    tableRadioGroup: statusEnum,
    value: statusKey,
    changeTableList: ({ target }: any) => {
      form.resetFields();
      actions.fetchCheckedList({
        statusKey: target.value,
      });
    },
  };
  // 筛选组件参数
  const filterProps = {
    form,
    spinning,
    filterCondition,
    onSearch: (payload: any) => {
      actions.handleSearch({
        ...payload,
      });
    },
    onReset: () => {
      actions.handleSearch({});
    },
  };

  const listProps = {
    actions,
    spinning,
    fields,
    pagination,
    list,
    formFields,
    confirmLoading,
    onChange: (page: any, filter: any) => {
      const { current, pageSize } = page;

      let payload: any = {
        pn: current,
        ps: pageSize,
      };

      actions.fetchList(payload);
    },
  };

  return (
    <>
      <Statistics {...statisticsProps} />
      <FilterTemp {...filterProps} />
      <h2 className="commonTit" style={{ display: 'inline', lineHeight: '32px' }}>
        订单列表
      </h2>
      <ListTemp {...listProps} />
    </>
  );
};

// 配置model
const mapStateToProps = (props: any) => {
  return {
    [namespace]: props[namespace],
  };
};

// 处理状态
const mapDispatchToProps = (dispatch: any) => {
  return {
    actions: {
      handleSearch(payload: any) {
        dispatch({
          type: `${namespace}/updateState`,
          payload: {
            filterParams: payload,
          },
        });
        dispatch({
          type: `${namespace}/fetchList`,
          payload: {
            ...payload,
            pn: 1,
            ps: 10,
          },
        });
      },
      fetchList(payload: any) {
        dispatch({
          type: `${namespace}/fetchList`,
          payload,
        });
      },
      fetchCheckedList(payload: any) {
        dispatch({
          type: `${namespace}/fetchCheckedListData`,
          payload,
        });
      },
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Page);
